<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/mui.min.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.min.js"></script>
    </head>
    <body class="soye-hui">
      <div class="ddlb-mains">
        <ul class="ddlb-nav">
          <li class="active"><span>待上刊</span></li>
          <li><span>进行中</span></li>
          <li><span>已完成</span></li>
          <li><span>已失效</span></li>
        </ul>
        <!-- 待上刊 -->
        <ul class="ddlb-list">
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_time.png" class="bot-img">
                <span class="bot-spans">上刊时间:5.1-5.3，逾期失效</span>
              </div>
              <div class="bot-rig">完成上刊</div>
            </div>
          </li>
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_shenhe.png" class="bot-img2">
                <span class="bot-spans">上刊审核中，请耐心等待</span>
              </div>
            </div>
          </li>  
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn-shenhe-shibai.png" class="bot-img2">
                <span class="bot-spans">上刊审核被拒绝，请重新提交</span>
              </div>
              <div class="bot-rig">重新提交</div>
            </div>
          </li>                              
        </ul>
        <!-- 进行中 -->
        <ul class="ddlb-list" style="display: none;">
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_time.png" class="bot-img">
                <span class="bot-spans">（1/4）请在规定时间点更新任务进度</span>
              </div>
              <div class="bot-rig">更新任务进度</div>
            </div>
          </li>
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_shenhe.png" class="bot-img2">
                <span class="bot-spans">（2/4）进度审核中，请耐心等待</span>
              </div>
            </div>
          </li>  
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn-shenhe-shibai.png" class="bot-img2">
                <span class="bot-spans">（1/4）进度审核被拒请重新提交</span>
              </div>
              <div class="bot-rig">重新提交</div>
            </div>
          </li>                              
        </ul>   
        <!-- 已完成 -->
        <ul class="ddlb-list" style="display: none;">
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
              <span class="top-span2">酬金:¥200.00</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_choujing.png" class="bot-img3">
                <span class="bot-spans">酬金已转入您的钱包，请查收。</span>
              </div>
            </div>
          </li>
        </ul> 
        <!-- 已失效 -->
        <ul class="ddlb-list" style="display: none;">
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_quxiaorenwu.png" class="bot-img4">
                <span class="bot-spans">主动取消任务，任务失效</span>
              </div>
            </div>
          </li>
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_quxiaorenwu.png" class="bot-img4">
                <span class="bot-spans">超时未完成上刊，任务自动失效</span>
              </div>
            </div>
          </li>
          <li>
            <div class="list-top">
              <span class="top-span1">任务单号:12222111001</span>
            </div>
            <div class="list-center">
              <img src="img/tu1.jpg" class="cen-img">
              <p class="cen-ps">任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称任务名称。</p>
            </div>
            <div class="list-bottom">
              <div class="bot-left">
                <img src="img/btn_quxiaorenwu.png" class="bot-img4">
                <span class="bot-spans">超时未更新任务进度，任务自动失效</span>
              </div>
            </div>
          </li>          
        </ul>                      
      </div>
      <div class="fixed-mains">
        <ul class="fixed-nav">
        <!-- class="li1 li2 li3"时为选中状态 -->
          <li>
            <div class="fixed-img fixed-img1"></div>
            <div class="fixed-div">首页</div>
          </li>
          <li  class="li2">
            <div class="fixed-img fixed-img2"></div>
            <div class="fixed-div">任务</div>
          </li>
          <li>
            <div class="fixed-img fixed-img3"></div>
            <div class="fixed-div">我的</div>
          </li>          
        </ul>
      </div>
    </body>
</html>
 <script type="text/javascript">
  $(".ddlb-nav li").bind('click',function(){
    $(this).addClass("active").siblings().removeClass("active");
    $('.ddlb-list').eq($(this).index()).show().siblings(".ddlb-list").hide(); 
  });
  </script>